<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<script src="./products.js"></script>
<script>
// 全局变量products
console.log(products)
// 要求：先到控制台观察数据的属性和解构，然后按要求筛选或转换数据
// 商品名字段name
// 0. 取itemType是'ART' 并且 price.regularPrice<200
console.log(products
  .filter(p => p.itemType === 'ART'
    && p.price.regularPrice < 200))

// 1.取出所有类型（productType）为 “背包”且颜色（designText）不为“蓝色”的商品
console.log(
  products.filter(function({designText, productType}) {
    return productType === '背包' && designText!=='蓝色'
  })
)

// 2.取出所有类型（productType）含有“袋”字，并且是新品（new=true）的商品名字的数组
// filter -> indexOf
console.log(
  products.filter(function({productType, new: n}) {
    return productType.indexOf('袋')> -1 && n
  }).map(function({name}) {
    return name
  })
)

// 3.选出价格最贵（价格的属性price.regularPrice）的十个商品(从高到低)，并转换为html字符串，html的格式为
/*
  <ul>
    <li><img src='图片属性（image)' />商品名：n元</li>
    <li><img src='图片属性（image)' />商品名：n元</li>
    <li><img src='图片属性（image)' />商品名：n元</li>
    <li><img src='图片属性（image)' />商品名：n元</li>
  </ul>
*/
console.log(
  products.sort(function(
    {price: {regularPrice: a}},
    {price: {regularPrice: b}}
    ){
      return b - a
    }).slice(0, 10)
)


</script>
</body>
</html>